<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加题目</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        .container {
            padding: 20px;
        }
        .option-item {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
        }
        .option-input {
            flex: 1;
            margin-right: 10px;
        }
        .option-image {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form class="layui-form" id="questionForm">
            <div class="layui-form-item">
                <label class="layui-form-label">题型</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required" lay-filter="typeChange">
                        <option value="1">填空题</option>
                        <option value="2">单选题</option>
                        <option value="3">多选题</option>
                        <option value="4">判断题</option>
                        <option value="5">简答题</option>
                    </select>
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">题目内容</label>
                <div class="layui-input-block">
                    <textarea id="contentEditor" style="display: none;"></textarea>
                </div>
            </div>
            
            <div id="optionsContainer" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">选项</label>
                    <div class="layui-input-block">
                        <div id="optionsList">
                            <div class="option-item">
                                <div class="option-input">
                                    <input type="text" name="options[A]" placeholder="选项A" class="layui-input">
                                </div>
                                <div class="option-image">
                                    <button type="button" class="layui-btn layui-btn-sm" id="uploadA">上传图片</button>
                                    <input type="hidden" name="option_images[A]">
                                    <div class="image-preview" id="previewA" style="display:none;margin-top:5px;"></div>
                                </div>
                            </div>
                            <div class="option-item">
                                <div class="option-input">
                                    <input type="text" name="options[B]" placeholder="选项B" class="layui-input">
                                </div>
                                <div class="option-image">
                                    <button type="button" class="layui-btn layui-btn-sm" id="uploadB">上传图片</button>
                                    <input type="hidden" name="option_images[B]">
                                    <div class="image-preview" id="previewB" style="display:none;margin-top:5px;"></div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="layui-btn layui-btn-sm" id="addOption">添加选项</button>
                    </div>
                </div>
            </div>
            
            <div class="layui-form-item" id="answerContainer">
                <label class="layui-form-label">正确答案</label>
                <div class="layui-input-block" id="answerInput">
                    <input type="text" name="answer" placeholder="正确答案" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">题目解析</label>
                <div class="layui-input-block">
                    <textarea id="explanationEditor" style="display: none;"></textarea>
                </div>
            </div>
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submitForm">提交</button>
                </div>
            </div>
        </form>
    </div>

    <script src="/static/layui/layui.js"></script>
    <script>
        layui.use(['form', 'layedit', 'upload'], function(){
            var form = layui.form;
            var layedit = layui.layedit;
            var upload = layui.upload;
            var $ = layui.$;
            
            // 初始化编辑器
            var contentEditor = layedit.build('contentEditor', {
                height: 200,
                uploadImage: {
                    url: '/upload/image'
                }
            });
            
            var explanationEditor = layedit.build('explanationEditor', {
                height: 150,
                uploadImage: {
                    url: '/upload/image'
                }
            });
            
            // 题型变化监听
            form.on('select(typeChange)', function(data){
                var type = data.value;
                var optionsVisible = (type == 2 || type == 3);
                var answerVisible = (type != 5);
                
                $('#optionsContainer').toggle(optionsVisible);
                $('#answerContainer').toggle(answerVisible);
                
                if (type == 3) {
                    // 多选题
                    $('#answerInput').html(`
                        <div class="layui-input-inline">
                            <input type="checkbox" name="answer[]" value="A" title="A">
                            <input type="checkbox" name="answer[]" value="B" title="B">
                            <input type="checkbox" name="answer[]" value="C" title="C">
                            <input type="checkbox" name="answer[]" value="D" title="D">
                        </div>
                    `);
                } else if (type == 4) {
                    // 判断题
                    $('#answerInput').html(`
                        <select name="answer">
                            <option value="1">正确</option>
                            <option value="0">错误</option>
                        </select>
                    `);
                } else {
                    // 其他题型
                    $('#answerInput').html('<input type="text" name="answer" placeholder="正确答案" class="layui-input">');
                }
                form.render();
            });
            
            // 选项图片上传
            ['A', 'B', 'C', 'D'].forEach(function(option) {
                upload.render({
                    elem: '#upload' + option,
                    url: '/upload/image',
                    done: function(res){
                        if(res.code === 0){
                            $('input[name="option_images[' + option + ']"]').val(res.data.src);
                            $('#preview' + option).html('<img src="' + res.data.src + '" style="max-height:60px;">').show();
                        } else {
                            layer.msg('上传失败: ' + res.msg);
                        }
                    }
                });
            });
            
            // 添加选项
            $('#addOption').click(function(){
                var options = ['A', 'B', 'C', 'D', 'E', 'F'];
                var currentCount = $('#optionsList .option-item').length;
                if (currentCount >= options.length) return;
                
                var optionKey = options[currentCount];
                var html = `
                <div class="option-item">
                    <div class="option-input">
                        <input type="text" name="options[${optionKey}]" placeholder="选项${optionKey}" class="layui-input">
                    </div>
                    <div class="option-image">
                        <button type="button" class="layui-btn layui-btn-sm" id="upload${optionKey}">上传图片</button>
                        <input type="hidden" name="option_images[${optionKey}]">
                        <div class="image-preview" id="preview${optionKey}" style="display:none;margin-top:5px;"></div>
                    </div>
                </div>
                `;
                
                $('#optionsList').append(html);
                
                // 初始化新选项的上传功能
                upload.render({
                    elem: '#upload' + optionKey,
                    url: '/upload/image',
                    done: function(res){
                        if(res.code === 0){
                            $('input[name="option_images[' + optionKey + ']"]').val(res.data.src);
                            $('#preview' + optionKey).html('<img src="' + res.data.src + '" style="max-height:60px;">').show();
                        } else {
                            layer.msg('上传失败: ' + res.msg);
                        }
                    }
                });
            });
            
            // 表单提交
            form.on('submit(submitForm)', function(data){
                // 获取编辑器内容
                data.field.content = layedit.getContent(contentEditor);
                data.field.explanation = layedit.getContent(explanationEditor);
                
                // 处理多选题答案
                if (data.field.type == 3 && data.field.answer) {
                    data.field.answer = JSON.stringify(data.field.answer);
                }
                
                // 提交表单
                $.post('/admin/question/add', data.field, function(res){
                    if(res.code === 0){
                        layer.msg('添加成功');
                        setTimeout(function(){ location.reload(); }, 1000);
                    } else {
                        layer.msg('添加失败: ' + res.msg);
                    }
                });
                return false;
            });
        });
    </script>
</body>
</html>